

// webpack 打包的配置文件
// 入口
// 出口
// devServer 配置

// loader
// 打包 js（react）
// 打包 CSS/less/scss
// 打包 image
// 打包 HTML
// 打包 JSON


// mode
const path = require("path")
const htmlWebpackPlugin = require("html-webpack-plugin")
const OpenBrowserPlugin = require('webpack-open-browser-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack")

module.exports = {
    mode: "development",  // 开发模式
    entry: ["./src/main.js"],    // 入口文件
    output: {
        path: path.resolve(__dirname, "dist"), //打包得到一个dist
        filename: "js/app.[hash:8].js", // hash:8 hash算法得到长度为8随机字符串 避免冲突
        publicPath: "",  // 文件的相对路径

    },
    devtool: "source-map",  // 查看所有文件 方便在线调试

    // 文件别名 
    resolve: {
        alias: {
            "@": path.resolve("src"),
            "~": path.resolve("src/utils")
        }
    },

    module: {
        rules: [
            {   // js高级代码打包
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            // 图片打包
            {
                test: /\.(png|jpg|svg|gif|eot|ttf|woff|woff2)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,   // 打包的图片最大 8M
                            name: 'imgs/[name].[hash:8].[ext]'  // photo.png  => photo.1234qwer.png 
                        },
                    }
                ]
            },
            // 打包less
            // {
            //     test: /\.(css|less)$/i,
            //     use: extractTextWebpack.extract({
            //         fallback: "style-loader",  //Creates `style` nodes from JS strings 把css代码转换为node风格的JS字符串
            //         use: [
            //             'css-loader', // Translates CSS into CommonJS  把Css变成 CommonJS 模块 
            //             {
            //                 loader: "postcss-loader",    // 处理css代码
            //                 options: {
            //                     plugins: function () {
            //                         require("cssgrace")   //代码美化
            //                         require("autoprefixer")  // 代码自动补全  webkit moz ms 
            //                         require("postcss-px2rem")({
            //                             // 手机端需要 
            //                         })
            //                     }
            //                 }
            //             },
            //             "less-loaber"
            //         ]
            //     })
            // }
            // 打包scss
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.less$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
            },
            {
                test: /\.(sass|scss)$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
            }
        ]

    },

    // 启动的服务
    devServer: {
        host: "localhost",
        port: 7000,
        hot: true,  // 热替换
        // open: true,  // 自动打开浏览器
        compress: true   // 压缩
    },

    // webpack 插件
    plugins: [
        new htmlWebpackPlugin({
            template: "./public/index.html",
            inject: true,   // 自动 引入打包的文件 
            minify: true  // 是否压缩
        }),
        new OpenBrowserPlugin({
            url: "http://localhost:7000"
        }),

        // 抽离样式
        // new extractTextWebpack({
        //     filename: "css/app.[hash:8].css",
        //     allChunks: true, // 抽离所有样式
        //     disable: false // 是否禁用
        // })

        new MiniCssExtractPlugin({
            filename: "css/app.[hash:8].css",
            chunkFilename: "css/[id].[hash:8].css",
        }),


        // 全局导入 react  react.component 
        new webpack.ProvidePlugin({
            React: 'React',
            Component: ['react', "Component"]
        })

    ]

}
